import React, {PureComponent} from "react";
import * as styles from "./index.module.less";
import {isFunction} from "lodash-es";
import PhotoSwiper from "../PhotoSwiper";
/**
 * 富文本组件 回显预览
 * @Author: Admin
 * @Date: 2021/3/1 14:20
 */

export default class BraftPreviewComp extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {};
        window.preImg = this.preImg.bind(this);
    }


    preImg(e){
        if(e){
            let src = isFunction(e.getAttribute) && e.getAttribute("data-src");
            if(src){
                this.setState({
                    isShowPS: true,
                    photoList: [{src}]
                })
            }

        }
    }

    dealComment(comment){
        let __html = comment;

        if(__html && __html.indexOf('<img') > -1){
            __html = __html.replace(/<img/g,`<img onclick="preImg(this)"`)
        };
        return __html;
    }

    render(){
        let {photoList = []} = this.state;
        const __html = this.dealComment(this.props.comment);

        return <div className={styles.commentMain}>
            <div
                className={"comment"}
                dangerouslySetInnerHTML={{
                    __html: __html || '',
                }}
            />
            {
                this.state.isShowPS && (
                    <PhotoSwiper
                        visible={this.state.isShowPS}
                        onClose={() => {
                            this.setState({isShowPS: false});
                        }}
                        photoList={photoList}
                    />
                )
            }
        </div>

    }
}
